<template>
	<view class="pageBg">
		<view class="headerview spaceEvenly">
			<view @click="tabChange({ item: i, index })" :class="tabindex === index ? 'itemAct' : ''" class="item" v-for="(i, index) in tabList" :key="i.type">
				<view class="title">
					{{ i.name }}
				</view>
			</view>
		</view>
		<house ref="paginationScrolling" @tabChange="tabChange" :swiperCur="tabindex" :tabList="tabList" api="goodslists" apiData="type">
			<template #scrollList0="{ list }">
				<goodlist :listData="list" type="2"/>
			</template>
			<template #scrollList1="{ list }">
				<goodlist :listData="list" type="3"/>
			</template>
		</house>
	</view>
</template>

<script>
	import goodlist from '@/components/index/goodlist/goodlist.vue';
	import house from '@/components/paginationScrolling/house.vue';
	export default {
		components: {
			goodlist,
			house,
		},
		data() {
			return {
				tabList: [
					{
						name: '展会列表',
						type: 0,
						
					},
					{
						name: '行业大会',
						type: 1,
						
					},
				],
				tabindex: 0,
			};
		},
		onLoad({type}) {
			this.tabindex=type?Number(type):0;
			this.$forceUpdate()
		},
		onShow() {
			if (this.$refs.paginationScrolling) {
				this.$refs.paginationScrolling.reset();
				this.$refs.paginationScrolling.init();
			}
		},
		methods: {
			tabChange({ item, index }) {
				this.tabindex = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		.headerview {
			width: 100%;
			height: 80rpx;
			overflow: hidden;
			background: #ffffff;
			.item {
				margin-top: 15rpx;
				color: #999999;
				font-size: $uni-font-size-12;
				position: relative;
			}
			.itemAct {
				color: $price-color;
				&:before {
					position: absolute;
					content: '';
					width: 100%;
					height: 4rpx;
					background: #1fc28b;
					top: 45rpx;
				}
			}
		}
	}
</style>
